<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>子组件向父组件传递信息</title>
    <!-- 导入vue库依赖 -->
    <script src="./js/vue.js"></script>
    <script src="./js/vue-router.js"></script>
</head>

<body>
    <div id="app">

        <div>
            <span>{{pmsg}}</span>
        </div>


        <p>------------------------</p>
        <!-- 这是父    子向父通过事件传值 -->
        <button-show v-on:handle='handlson($event)'></button-show>

    </div>
    <script>


        Vue.component('button-show', {
            data: function () {
                return {
                    smsg: '我是从子组件过来的值'
                }
            },
            //   字符串模板
            // 这是子   => 父  注册事件
            template:
                `<div>
                    <button v-on:click='$emit("handle", smsg)'>
                        子向父传值
                    </button>
                </div>`
        })
        var vm = new Vue({
            el: '#app',
            data: {
                pmsg: '父组件'
            },
            methods: {
                handlson: function (val) {
                    console.log('父组件: ' + val);
                    this.pmsg = val
                }
            },
        })
    </script>
</body>

</html>


<!--2------------- 子组件向父组件传值 通过事件注册传递参数的方式  -->